<script setup>
import { ref, onMounted } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { getDepression, getPremature, getInsomnia } from '@/apis/apis.js'
const name = ref('')
const answers = ref([])
const data = ref([])
const handleAgain = () => {
  uni.navigateBack()
}
onLoad((option) => {
  console.log(JSON.parse(option.query))
  name.value = JSON.parse(option.query).name
  answers.value = JSON.parse(option.query).answers
})
onMounted(async () => {
  if (name.value === '抑郁测评专业版') {
    const res = await getDepression({
      value: answers.value
    })
    console.log(res)
    data.value = res.data
  }
  else if (name.value === '男性功能测评') {
    const res = await getPremature({
      value: answers.value
    })
    console.log(res)
    data.value = res.data
  }
  else if (name.value === '失眠程度测评') {
    const res = await getInsomnia({
      value: answers.value
    })
    console.log(res)
    data.value = res.data
  }
})
onShareAppMessage(() => {
  if (name.value === '抑郁测评专业版') {
    return {
      title: name.value,
      path: `/pages/self-test/topic?name=${name.value}`,
      imageUrl: 'https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/F-yiyu.png'
    }
  }
  else if (name.value === '男性功能测评') {
    return {
      title: name.value,
      path: `/pages/self-test/topic?name=${name.value}`,
      imageUrl: 'https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/F-zaoxie.png'
    }
  }
  else if (name.value === '失眠程度测评') {
    return {
      title: name.value,
      path: `/pages/self-test/topic?name=${name.value}`,
      imageUrl: 'https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/F-shimian.png'
    }
  }
})
</script>

<template>
  <view class="view" v-for="(item, index) in data" :key="index">
    <view class="view-header">
      <view class="view-header-title">结果分析</view>
      <view class="view-header-content">本测试及结果由AI得出，仅供参考，不能作为诊断及诊疗的依据</view>
    </view>
    <view class="view-body">
      <view class="view-body-title">{{ item.scope }}：{{ item.result }}</view>
      <view class="view-body-content">{{ item.suggest }}</view>
      <view class="view-body-result-tip">测评结果概述：</view>
      <view class="view-body-result-item" v-for="(outline, outlineIndex) in item.outline" :key="outlineIndex">{{ outlineIndex + 1 }}. {{ outline }}</view>
      <view class="view-body-recommend-tip">AI为你推荐以下科室：</view>
      <view class="view-body-recommend-item" v-for="(recommend, recommendIndex) in item.recommend" :key="recommendIndex">
        <view class="view-body-recommend-item-left">
          <view class="view-body-recommend-item-left-department">{{ recommend.dep_name }}</view>
          <view class="view-body-recommend-item-left-hospital">{{ recommend.hospital }}</view>
        </view>
        <view class="view-body-recommend-item-right">去挂号</view>
      </view>
    </view>
    <view class="view-footer">
      <button class="view-footer-share" open-type="share">邀请朋友测一测</button>
      <button class="view-footer-again" @click="handleAgain">再测一次</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.view {
  position: relative;
  padding-bottom: 300rpx;
  min-height: 100vh;
  background: linear-gradient(to bottom, #d6e8ff, #fff);
  .view-header {
    padding: 20rpx;
    .view-header-title {
      margin-bottom: 20rpx;
      font-size: 36rpx;
    }
  }
  .view-body {
    margin: 0 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .view-body-title {
      margin-bottom: 20rpx;
      color: #3676cc;
      font-size: 36rpx;
    }
    .view-body-content {
      margin-bottom: 20rpx;
      color: #3676cc;
    }
    .view-body-result-tip {
      margin-bottom: 20rpx;
    }
    .view-body-result-item {
      margin-bottom: 20rpx;
    }
    .view-body-recommend-tip {
      margin-bottom: 20rpx;
    }
    .view-body-recommend-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;
      padding: 20rpx;
      background-color: #f6fafb;
      .view-body-recommend-item-left {
        .view-body-recommend-item-left-department {
          margin-bottom: 20rpx;
        }
        .view-body-recommend-item-left-hospital {
          color: #ccc;
        }
      }
      .view-body-recommend-item-right {
        padding: 10rpx 20rpx;
        background-color: #2a75f9;
        border-radius: 10rpx;
        color: #fff;
      }
    }
  }
  .view-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    width: 750rpx;
    background-color: #fff;
    .view-footer-share {
      width: 300rpx;
      background-color: #ebf3ff;
      border-radius: 10rpx;
      color: #2a75f9;
    }
    .view-footer-again {
      width: 300rpx;
      background-color: #2a75f9;
      border-radius: 10rpx;
      color: #fff;
    }
  }
}
</style>
